<script lang="ts" setup>
import { ref } from 'vue'
import { ApiConfigForm, KeyValues } from '../../utils/types';
import { createNonEmptyRule, openModal } from '../../utils';
import { FormInstance } from 'element-plus';

const cls = 'ui-api-editor-result-config'
const props = defineProps<{ modelValue: ApiConfigForm }>()
const fromRef = ref<FormInstance>()

const resCodes = [200, 302, 400, 401, 403, 404, 500]

const currentType = ref('warning')
const tips:{type:any,info:string }[] = [
  { type: 'warning', info: '提示：当前未测试' },
  { type: 'danger', info: '提示：当前测试不通过' },
  { type: 'success', info: '提示：当前测试已通过' }
]

const form = ref<KeyValues>({
  resCode: resCodes[0]
})

const rules = {
  successExample: createNonEmptyRule('请输入成功响应示例'),
}
const onTest = () => {
  openModal(() => import('./TestDrawer.vue'), {
    title: '测试',
    row: { apiId: props.modelValue.apiId },
    onSubmitted: params => {
      console.log(params)
    }
  })
}
defineExpose({
  getForm: () => form.value,
  validate: () => fromRef.value.validate()
})
</script>

<template>
  <ElForm ref="fromRef"  :class="`${cls}`" :model="form" :rules="rules" label-width="8em" label-suffix=" :" style="max-width: 780px;">
    <ElFormItem label="测试">
      <div :class="`${cls}_test`">
        <ElButton type="primary" @click="onTest()" >测试</ElButton>
      </div>
      <ElText v-show=" _.type=== currentType" 
        v-for=" _ in tips" :key="_.type " :type="_.type" 
      >{{ _. info }}</ElText>
    </ElFormItem>
    <ElFormItem label="成功响应示例" prop="successExample">
      <ElInput type="textarea" rows="8" v-model="props.modelValue.successExample"  placeholder="请输入示例（必填）" />
    </ElFormItem>
    <ElFormItem label="失败响应示例">
      <ElInput type="textarea" rows="8" placeholder="请输入示例（可选）" />
    </ElFormItem>
  </ElForm>
</template>
<style lang="scss">
.ui-api-editor-result-config {
  &_test {
    display: flex;
    align-items: center;
    width: 100%;
  }
  &_popper {
    max-width: 340px;
  }
}
</style>
